<template>
	<view class="details">
		<van-cell-group>
			<van-cell title="订单状态">
				<view :class="info.statusName.color">{{info.stateName}}</view>
			</van-cell>
			<van-cell title="交易数量" :value="info.nums" />
			<van-cell title="交易金额" :value="allprice" />
			<van-cell title="对方姓名" :value="info.name"></van-cell>
			<van-cell title="对方电话" :value="info.phone" @tap="onPhone(info.phone)" />
			<van-cell title="对方支付宝号" :value="info.aliAccount" @tap="onClipbard(info.aliAccount)" />
			<van-cell title="交易时间" :value="info.statusName.stateTime" />
			<van-cell title="注意" label="订单配对成功,请在2小时内付款,否则将冻结账户" />
			<van-cell
				title="投诉"
				@click="delorder"
				v-if="info.status === 2"
				value="点击投诉"
				label="转账切勿填写任何备注，若支付宝信息与卖方不符，可点击投诉，人工审核后将冻结卖方账户"
				:border="false"
			/>
		</van-cell-group>
		<block v-if="info.status === 2">
			<view class="countdown">
				<uni-countdown color="#FFFFFF" background-color="#00B26A" border-color="#00B26A" :show-day="false" :hour="hour" :minute="minute" :second="second"></uni-countdown>
			</view>
		</block>
		<view class="licenseItem-title">卖方收款码</view>
		<view class="licenseItem-wrpa" @tap="onPreviewImage(info.simage)">
			<view class="licenseItem van-hairline--left">
				<view class="licenseItem"><image :src="info.simage" mode="aspectFit"></image></view>
			</view>
		</view>
		<view class="licenseItem-title">打款截图</view>
		<view class="licenseItem-wrpa">
			<view class="licenseItem van-hairline--left">
				<view class="iconfont iconguanbi" @tap="clear" v-if="upfile && info.status < 3"></view>
				<view class="licenseItem" @click="onLicensel">
					<block v-if="upfile"><image :src="upfile" mode="aspectFit"></image></block>
					<block v-else>
						<view class="iconfont iconpaizhao"></view>
						<view class="text">上传打款截图</view>
					</block>
				</view>
			</view>
		</view>
		<view class="details-btn" v-if="info.status < 3"><button class="base-btn" @tap="onSubmit">上传打款截图</button></view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import { tradingState } from '../../../../common/utils/state.js'
import uniCountdown from "@/components/uni-countdown/uni-countdown.vue"
export default {
	components: {uniCountdown},
	data() {
		return {
			id: '',
			info: '',
			Licensel: '',
			upfile: '',
			loading: false,
			hour: 0,
			minute: 0,
			second: 0
			
		};
	},
	onLoad (key) {
		this.id = key.id
		this.mySellIng()
	},
	computed: {
		allprice () {
			const us = this.info.allprice
			return  us + ' RMB'
		}
	},
	methods: {
		onSubmit () {
			if (this.loading) return
			if (!this.Licensel.length) {
				uni.showToast({
					title: '请上传打款凭证',
					icon: 'none'
				});
				return
			}
			this.loading = true
			uni.showLoading({title: ''})
			this.$http.upload_one('/app/trade/upload', {
				id: this.id,
				upfile: this.upfile
			}).then(res => {
				const data = JSON.parse(res.data)
				this.loading = false
				if (data.success) {
					uni.showToast({
						title: '凭证提交成功'
					});
					this.info.status = 3
					this.info.stateName = '待确定'
					this.info.statusName = tradingState(this.info.status)
					return
				}
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				});
			})
		},
		delorder () {
			uni.showModal({
				title: '提示',
				content: `投诉${this.info.name}?`,
				success: (res) => {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/trading/record/buy/complain?id='+ this.id
						})
					}
				}
			});
		},
		onLicensel() {
			if (!this.upfile) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'],
					success: res => {
						this.Licensel = res.tempFilePaths[0];
						this.upfile = res.tempFilePaths[0]
					}
				});
				return
			}
			this.onPreviewImage(this.upfile)
		},
		onPhone (phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			});
		},
		mySellIng() {
			uni.showLoading({
				title: ''
			});
			this.$http.tradeDetail({id: this.id}).then(res => {
				const data = res.data;
				if (data.success) {
					uni.hideLoading();
					data.data.statusName = tradingState(data.data.status, data.data)
					console.log(tradingState(data.data.status, data.data))
					data.data.simage = this.$imgUrl+data.data.simage
					if (data.data.bimage) {
						data.data.bimage = this.$imgUrl+data.data.bimage
						this.upfile = data.data.bimage
					}
					this.info = data.data
					this.getTimes(this.info.statusName.stateTime)
					return;
				}
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				});
			});
		},
		clear () {
			this.Licensel = ''
			this.upfile = ''
		},
		onPreviewImage (img) {
			uni.previewImage({
				urls: [img]
			});
		},
		onClipbard (alipay) {
			uni.setClipboardData({
				data: alipay,
				success: function () {
					uni.showToast({
						title: "复制成功",
						icon: 'none'
					});
				}
			});
		},
		getTimes (key) {
			key = key.replace(/\-/g, "/")
			const date1 = +new Date(key) + 2 * 3600 * 1000
			const date2 = +new Date()
			const date3 = date1 - date2
			const leave1 = date3 % (24 * 3600 * 1000)    //时数
			const leave2 = leave1 % (3600*1000) // 分数
			const leave3 = leave2%(60*1000)      //毫秒数
			
			
			this.hour = Math.floor(leave1/(3600*1000))
			this.minute = Math.floor(leave2/(60*1000))
			this.second = Math.round(leave3/1000)
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../details.scss';
</style>
